<template>
  <div>
    <!-- 选择类型 -->
    <!-- <div class="selectType flex  mt-15 row-around font-w-5">
      <div
        @click="HomeType = item.type"
        :class="[
          'type',
          'row-col-center',
          HomeType == item.type ? 'isType' : '',
        ]"
        v-for="item in typeList"
        :key="item.name"
      >
        {{ item.name }}
      </div>
    </div> -->
    <typeSelect :typeList="typeList" @selectType="selectType"></typeSelect>

    <div class="topInput">
      <van-field
        v-model="valueForSearch"
        placeholder="请填写内容"
        left-icon="search"
        :clearable="true"
      />
    </div>

    <!-- 信息详情 -->
    <homeData
      @click="detailClick(item)"
      v-for="(item, key) in houseList"
      :key="key"
      :homeData="item"
    ></homeData>

    <div class="lists">
      <div class="list"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import homeData from "@/components/homeData/index.vue";
import typeSelect from "@/components/typeSelect/index.vue";
import { useRoute, useRouter } from "vue-router";
import houseApi from "@/api/house.js";
// router
const router = useRouter();
const route = useRoute();

const valueForSearch = ref("");
watch(valueForSearch, (newval) => {
  getHouseList(newval);
});

// watch(() => route.path, (newval) => {
//   console.log('newVal', newval);
// })
const typeList = ref([
  {
    name: "户型数据查询",
    type: 1,
  },
  {
    name: "装修材料列表",
    type: 2,
  },
]);
const houseList = ref();
const types = ref(1)

/**
 * 获取列表
 */
const getHouseList = async (houseName) => {
  try {
    const res = await houseApi.getHouseList({
      houseName: houseName,
    });
    console.log(res.data.rows);
    houseList.value = res.data.rows;
    houseList.value.forEach((item) => {
      item.houseImage = item.houseImage.split(",");
    });
  } catch (error) {
    console.log(error);
  }
};
const complaint = async () => {
  try {
    // let res = await houseApi.getDecorationList();
    let res = await houseApi.getDecoration();
    // console.log('---res---', res);
    // console.log('--res--', res.data.data);
    // houseList.value = res.data.data.map((item) => {
    //   item.houseImage = item.houseImage.split(",");
    //   return item;
    // })
    houseList.value = res.data.rows;
  } catch (error) {
    console.log(error);
  }
}
// 切换type
const selectType = (type) => {
  try {
    // 当前装修材料列表
    types.value = type;
    valueForSearch.value = "";
    houseList.value = [];
    type == 1 ? getHouseList() : complaint()
    // if (type == 1) {
    //   btns.value = {
    //     name: "整修备案+",
    //     color: "#409EFE",
    //     toPath: "addReo",
    //   };
    // } else {
    //   btns.value = {
    //     name: "我要投诉+",
    //     color: "#409EFE",
    //     toPath: "complaint",
    //   };
    // }
  } catch (error) {}
}
getHouseList();
const detailClick = (item) => {
  if (types.value == 1) {
    router.push({
      path: "/homeDetail",
      query: {
        houseId: item.houseId,
      },
    })
  } else {
    return
  }
}
</script>

<style lang="scss" scoped>
.topInput {
  padding: 15px;
}
::v-deep .van-field {
  background-color: #fff !important;
  border-radius: 30px;
}
.selectType {
  .type {
    width: 162px;
    height: 60px;
    border-radius: 10px;
    background: linear-gradient(270deg, #f3f3f3 0%, #e5e5e5 95%);
    color: #666666;
    font-weight: 600;
  }
  .isType {
    background: linear-gradient(270deg, #eef7ff 0%, #bbdfff 100%);
    z-index: inherit;
    color: #222222;
  }
}
</style>
